/* Import bootstrap, but prefix it all with our grid div so we don't clobber our interactive windows styles */
#variable-explorer-data-grid {
    @import "~bootstrap-less/bootstrap/bootstrap.less";
}

#variable-explorer-data-grid .form-control {
    height: auto;
    padding: 0px;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    border-radius: 0px;
}

#variable-explorer-data-grid .react-grid-Main {
    font-family: var(--code-font-family);
    background-color: var(--override-background, var(--vscode-editor-background));
    color: var(--override-foreground, var(--vscode-editor-foreground));
    outline: none;
}

#variable-explorer-data-grid .react-grid-Grid {
    background-color: var(--override-background, var(--vscode-editor-background));
    color: var(--override-foreground, var(--vscode-editor-foreground));
    border-style: none;
}

#variable-explorer-data-grid .react-grid-Canvas {
    background-color: var(--override-background, var(--vscode-editor-background));
    color: var(--override-foreground, var(--vscode-editor-foreground));
}

#variable-explorer-data-grid .react-grid-Header {
    background-color: var(--override-tabs-background, var(--vscode-notifications-background));
}

#variable-explorer-data-grid .react-grid-HeaderCell {
    background-color: var(--override-lineHighlightBorder, var(--vscode-editor-lineHighlightBorder));
    color: var(--override-foreground, var(--vscode-editor-foreground));
    border-style: solid;
    border-color: var(--override-badge-background, var(--vscode-badge-background));
    padding: 2px;
}


#variable-explorer-data-grid .react-grid-Row--even {
    background-color: var(--override-background, var(--vscode-editor-background));
    color: var(--override-foreground, var(--vscode-editor-foreground));
    border-right-color: var(--override-badge-background, var(--vscode-badge-background));
    border-bottom-color: var(--override-badge-background, var(--vscode-badge-background));
}

#variable-explorer-data-grid .react-grid-Row--odd {
    background-color: var(--override-lineHighlightBorder, var(--vscode-editor-lineHighlightBorder));
    color: var(--override-foreground, var(--vscode-editor-foreground));
    border-right-color: var(--override-badge-background, var(--vscode-badge-background));
    border-bottom-color: var(--override-badge-background, var(--vscode-badge-background));
}

#variable-explorer-data-grid .react-grid-Cell {
    background-color: transparent;
    color: var(--override-foreground, var(--vscode-editor-foreground));
    border-style: none;
}

#variable-explorer-data-grid .react-grid-Cell:hover {
    background-color: var(--override-selection-background, var(--vscode-editor-selectionBackground));
}

#variable-explorer-data-grid .react-grid-Row:hover {
    background-color: var(--override-selection-background, var(--vscode-editor-selectionBackground));
}

#variable-explorer-data-grid .react-grid-Row:hover .react-grid-Cell {
    background-color: var(--override-selection-background, var(--vscode-editor-selectionBackground));
}

#variable-explorer-data-grid .rdg-selected {
    visibility: hidden;
}
